<template>
  <div class="content">
    <el-table highlight-current-row :data="dataList" @row-click="handleClick">
      <el-table-column prop="songName" label="歌曲"/>
      <el-table-column prop="singerName" label="歌手"/>
      <el-table-column prop="introduction" label="专辑"/>
    </el-table>
  </div>
</template>

<script lang="ts">
import {defineComponent, getCurrentInstance, toRefs, computed, reactive} from "vue";
import {useStore} from "vuex";
import {Delete, Download} from "@element-plus/icons-vue";

import mixin from "@/mixins/mixin";
import {HttpManager} from "@/api";
import {Icon} from "@/enums";

export default defineComponent({
  components: {
  },
  props: {
    songList: Array,
    show: {
      default: false
    }
  },
  emits: ["changeData"],
  setup(props) {
    const {getSongTitle, getSingerName, playMusic, checkStatus, downloadMusic} = mixin();
    const {proxy} = getCurrentInstance();
    const store = useStore();

    const {songList} = toRefs(props);

    const iconList = reactive({
      dislike: Icon.Dislike,
      like: Icon.Like,
    });

    const songUrl = computed(() => store.getters.songUrl);
    const singerName = computed(() => store.getters.singerName);
    const songTitle = computed(() => store.getters.songTitle);
    const dataList = computed(() => {
      return songList.value
          .filter((item: any) => item) // 过滤掉 undefined 或 null 项
          .map((item: any, index) => ({
            ...item,
            songName: getSongTitle(item.name),
            singerName: getSingerName(item.name),
            index,
          }));
    });

    //旧的
    // const dataList = computed(() => {
    //   const list = [];
    //   songList.value.forEach((item: any, index) => {
    //     item["songName"] = getSongTitle(item.name);
    //     item["singerName"] = getSingerName(item.name);
    //     item["index"] = index;
    //     list.push(item);
    //   });
    //   return list;
    // });

    function handleClick(row) {
      playMusic({
        id: row.id,
        url: row.url,
        pic: row.pic,
        index: row.index,
        name: row.name,
        lyric: row.lyric,
        currentSongList: songList.value,
      });
    }

    function handleEdit(row) {
      console.log("row", row);
    }

    const userId = computed(() => store.getters.userId);

    async function deleteCollection({id}) {
      if (!checkStatus()) return;

      const result = (await HttpManager.deleteCollection(userId.value, id)) as ResponseBody;
      (proxy as any).$message({
        message: result.message,
        type: result.type,
      });

      if (result.data === false) proxy.$emit("changeData", result.data);
    }

    return {
      dataList,
      iconList,
      Delete,
      Download,
      songUrl,
      singerName,
      songTitle,
      handleClick,
      downloadMusic,
      deleteCollection,
    };
  },
});
</script>


<style lang="scss" scoped>
@import "@/assets/css/var.scss";
@import "@/assets/css/global.scss";

.content {
  background-color: $color-white;
  border-radius: $border-radius-songlist;
  padding: 10px;
}

.content:deep(.el-table__row.current-row) {
  color: $color-black;
  font-weight: bold;
}

.content:deep(.el-table__row) {
  cursor: pointer;
}

.icon {
  @include icon(1.2em, $color-black);
}
</style>
